import Navbar from "./components/Navbar"
import Form from "./components/Form"
import List from "./components/List"
import { useState } from "react"

export default function App () {
    
    const [items, setItems] = useState([
        { id :1, text : "早睡早起" },
        { id :2, text : "背单词" },
        { id :3, text : "阅读半小时" },
    ])

    const addItem = (item) => setItems([...items,item])

    const deleteItem = (item) => {
        if (window.confirm("删除后不可撤回，确定要删除吗？")) {
            setItems(items.filter((current) => current.id !== item.id))
        }
    }

    const editItem = (item) => {
        const input = window.prompt("更新文本：", item.text)
        if (input) setItems(
            items.map((current) => (current.id === item.id) ? {...current, text : input} : current)
        )
    }

    const clearItems = () => setItems([])

    return (
        <div className="wrapper bg-dark text-white">
            <Navbar items={items} clearItems={clearItems}/>
            <div className="container pt-5">
                <div className="col-10 co-lg-6 mx-auto mt-5 p-2 border border-light rounded">
                    <Form addItem={addItem}/>
                    <List items={items} deleteItem={deleteItem} editItem={editItem}/>
                </div>
            </div>
        </div>
    ) 
}